<template>
  <div style="height:100%">
    
   
   
    <div class="alarm-modular modular-box">
      <div class="modular-head">
        <span class="title">运维单位列表</span>
        <div class="modular-toolbar">
          <div class="search-box" style="width: 180px;">
            <el-input placeholder="关键词"></el-input>
           
          </div>
          <el-button style="vertical-align: -1px;"><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button style="vertical-align: -1px;" @click="visiDialog=true"><i class="iconfont icon-tianjia"></i>新增</el-button>
        </div>
      </div>
      <div class="modular-body">
          <el-scrollbar style="height: 100%">
            <ul class="compList">
              <li v-for="(item,key) in compList" :key="key" :class="compIndex==key?'active':''" @click="listClick(item,key)">
                 <el-row>
                    <el-col :span="5" style="padding-left:30px">
                      <p class="onep comptitle"><i class="site-icon"></i><span class="site-name" style="color:#1a1a1a">{{item.name}}</span></p>
                      <p class="content-text"><span>91440312356558955</span></p>
                    </el-col>
                     <el-col :span="3">
                      <p class="onep"><span class="site-name">行政区域</span></p>
                      <p><span>深圳</span></p>
                    </el-col>
                     <el-col :span="3">
                      <p class="onep"><span class="site-name">联系人</span></p>
                      <p><span>杜航</span></p>
                    </el-col>
                    <el-col :span="3">
                      <p class="onep"><span class="site-name">联系电话</span></p>
                      <p><span>18711111111</span></p>
                    </el-col>
                    <el-col :span="6">
                      <p class="onep"><span class="site-name">详细地址</span></p>
                      <p><span>深圳市南山区高新技术产业园</span></p>
                    </el-col>
                     <el-col :span="4" style="text-align:center">
                      <el-button type="secondBtn" @click.stop="editor">编辑</el-button>
                      <el-button type="secondBtn" @click.stop="delet">删除</el-button>
                    </el-col>
                 </el-row>
              </li>
            </ul>
          </el-scrollbar>
      </div>
    </div>
    <el-dialog :visible.sync="visiDialog"  width="660px" title="运维单位新增" :before-close="closess">
       <div class="dialogcontent">
             <div class="dialog-layout">
                    <ul class="formul">
                      <li>
                          <div>
                                <span class="layoutspan">单位名称 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:178px">
                                  <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan" style="width:132px">统一社会信用代码 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">简称 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">法定代表人 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">法人电话 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">联系人 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">行政区域 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">联系电话 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                       <li>
                          <div>
                                <span class="layoutspan">邮政编码 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">企业网址 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div style="width:100%">
                                <span class="layoutspan">详细地址 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:510px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div style="width:100%">
                                <span class="layoutspan">企业介绍 : </span>&emsp;
                                <div class="layoutBox" style="width:510px">
                                  <el-input v-model="input" type="textarea" :rows="3"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <span class="layoutspan">资质上传 : </span>&emsp;
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i> 上传</span>
                                 
                                </el-upload>
                      </li>
                    </ul>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="visiDialog = false">确 定</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">取 消</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
var treedata = [
  {
    label: "一级 1",
    id: 1,
    children: [
      {
        label: "二级 1-1",
        id: 2,
        children: [
          {
            label: "二级 1-1",
            id: 3,
            children: [
              {
                label: "二级 1-4",
                id: 4
              },
              {
                label: "二级 1-5",
                id: 5
              },
              {
                label: "二级 1-6",
                id: 6
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 7,
            children: [
              {
                label: "二级 1-1",
                id: 8,
         
              },
              {
                label: "二级 1-1",
                id: 9,
            
              },
              {
                label: "二级 1-1",
                id: 10,
              
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 11,
            children: [
              {
                label: "二级 1-1",
                id: 12
              },
              {
                label: "二级 1-1",
                id: 13
              },
              {
                label: "二级 1-1",
                id: 14
              }
            ]
          }
        ]
      }
    ]
  }
];
export default {
  name: "",
  data() {
    return {
      visiDialog:false,

      tableData: [],
      input1:'宇星科技发展(深圳)有限公司',
      input:'',
      fileList: [],
      dateRange:'',
      treeConfig:{
        showCheckbox:false,
        defaultId:4,
        defaultText:'二级 1-4',
      },
      compList:[{name:'宇星科技发展(深圳)有限公司',id:1},{name:'中华科技发展（深圳）有限公司',id:2},{name:'湖南科技发展（深圳）有限公司',id:3},{name:'北软科技发展（深圳）有限公司',id:4}],
      compIndex:0,
      treedata:treedata
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  methods: {
    indexMethod(index) {
     
      return index + 1;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    closess(done) {
      done();
    },
    checkedNode(data){
        console.log(data)
    },
    //列表点击
    listClick(item,key){
      this.compIndex=key;
      this.$router.push({path:'/operaAndmaint/baseInfo/companyDetail', query: {
            id: item.id,
            name:item.name,
            
          }})
    },
    editor(){

    },
    delet(){

    }
  }
};
</script>

<style scoped lang="less">
.baseinfo{
  padding: 12px;
    li{
      margin-bottom: 12px;
      .layoutspan{
         width: 120px;
      }
    }
}
.dialog-layout{
     .layoutspan{
         width: 78px;
      }
}
.modular-box{
  border: 1px solid #dce9fa;
  .modular-head{
    padding: 7px 12px;
    border-bottom: 1px solid #dce9fa;
    line-height: 30px;
    .title{
      font-size: 16px;
      font-weight: 700;
    }
    .title:before{
      content:'';
      display: inline-block;
      width: 3px;
      height: 10px;
      background: #166bce;
      margin: 0 6px 1px 0;
    }
  }
  .modular-body{
    height: calc(100% - 45px);
    .compList{
      padding: 6px;
      li{
        padding: 8px;
        cursor: pointer;
        height: 86px;
        margin-bottom: 6px;
        &:last-child{
          margin-bottom: 0px;
        }
        p{
          color: #1a1a1a;
        }
        .comptitle{
          font-size: 16px;
        }
        .onep{
          height: 35px;
          color: #666;
        }
      }
      .active{
        border: 1px solid #dee2e6;
        box-shadow:0px 0px 4px #dee2e6;
        border-radius: 2px;
      }
    }
  }
}  
.alarm-modular{
    height:100%;
    .modular-toolbar{
      float: right;
    }
}
.search-box{
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-right: 12px;
  height: 30px;
  line-height: 30px;
  .icon-sousuo{
    position: absolute;
    right: 10px;
    top: 0;
    color: #7c8fa4;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
  }
  .icon-sousuo:hover{
    color: #166bce;
  }
  .icon-sousuo:active{
    color: #1056a7;
  }
  .search-input{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    padding-left: 5px;
    padding-right: 32px;
    outline: none;
    border: 1px solid #c6d1de;
  }
}
</style>
